<template>
    <div class="contacts">
        <div class="header">通讯录</div>
        <div class="contacts-container">
            <div class="user-list">
                <div class="user-list-item" v-for="(group, key) in groups || []" :key="key" @click="enterChat(group.uuid, 'group')">
                    <div class="user-item-avatar">
                        <img :src="group.avatar"/>
                    </div>
                    <div class="user-item-info">
                        <span class="user-item-info__name">{{group.name}}</span>
                    </div>
                </div>
            </div>
            <div class="contacts-title">联系人</div>
            <div class="user-list">
                <div class="user-list-item" v-for="(friend, key) in friends || []" :key="key"
                     @click="enterChat(friend.uuid, 'private')">
                    <div class="user-item-avatar">
                        <img :src="friend.avatar"/>
                    </div>
                    <div class="user-item-info">
                        <span class="user-item-info__name">{{friend.name}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "contacts",
        data() {
            return {
                friends: null,
                groups: null
            }
        },
        beforeMount() {
            this.groups = this.imService.groups;
            this.friends = this.imService.friends
        },
        methods: {
            enterChat(id, type) {//进入私聊
                this.$router.push({
                    name: type,
                    query: {
                        id : id
                    }
                })
            }
        }
    }
</script>

<style scoped>
    @import "./contacts.css";
</style>